<template>
  <!-- 顶部 -->
    <div class="box" @click="$router.push('/postdetail/'+ inntxt.id)">
      <div class="journalism" v-if="inntxt.type == 1 && inntxt.cover.length < 3">
          <div class="article">
              <div class="article_one">{{inntxt.title}}</div>
              <div class="article_two"> <a href="javascript:;">{{inntxt.user.nickname}}</a>&nbsp;&nbsp; <a href="javascript:;">{{inntxt.comment_length}}跟帖</a>  </div>
          </div>
          <div class="img"><img :src="inntxt.cover[0].url"> </div>
      </div>
      <!-- 三图结构 -->
      <div class="journalism_one" v-if="inntxt.type == 1 && inntxt.cover.length >= 3">
          <div class="linen">{{inntxt.title}}</div>
          <div class="linen_img">
              <a href="javascript:;" ><img :src="inntxt.cover[0].url" alt=""></a>
              <a href="javascript:;"><img :src="inntxt.cover[1].url" alt=""></a>
              <a href="javascript:;"><img :src="inntxt.cover[2].url" alt=""></a>
          </div>
          <div class="linen_three"><span>{{inntxt.user.nickname}}</span> <span>{{inntxt.comment_length}}跟帖</span></div>
      </div>
      <!-- 视频样式 -->
      <div class="journalism_two" v-if="inntxt.type == 2">
          <div class="video">{{inntxt.title}}</div>
          <div class="video_one">
              <img :src="inntxt.cover[0].url" alt="">
              <div class="iconfont iconshipin"></div>
          </div>
          <div class="video_two"> <a herf="javascript:;" >{{inntxt.user.nickname}}</a>  <a herf="javascript:;">{{inntxt.comment_length}}跟帖</a> </div>
      </div>
    </div>
</template>

<script>
export default {
    props:['inntxt']
}
</script>

<style lang="less" scoped>
    .box{
        .journalism{  //顶部新闻
            display: flex;
            height: 100/360*100vw;
            width: 100%;
            padding: 6/360*100vw;
            border-bottom: solid 1px #333333;
            .article{
                flex: 6;
                width: 100%;
                height: 100%;
                display: flex;
                flex-direction:column;
                .article_one{
                    flex: 1;
                    padding-top: 10/360*100vw;
                    font-size: 15/360*100vw;
                }
                .article_two{
                    font-size: 10/360*100vw;
                    color: #8b8888;
                    margin-bottom: 4/360*100vw;
                }
            }
            .img{
                flex: 4;
                border: 0;
                width: 100%;
                margin-right: 4/360*100vw;
                img{
                    display: block;
                    object-fit: cover;
                    width: 95%;
                    height: 100%;
                }
            }
        }
        .journalism_one{  //三图样式
            display: flex;
            flex-direction: column;
            height: 135/360*100vw;
            width: 100%;
            border-bottom: solid 1px #333333;
            padding: 3/360*100vw;
            .linen{
                padding: 4/360*100vw;
            }
            .linen_img{
                flex:1;
                width: 100%;
                height: 100%;
                display: flex;
                a{
                    width: 32.7%;
                    display: block;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
            .linen_three{
                padding: 3/360*100vw;
                span{
                    font-size: 10/360*100vw;
                    color: #8b8888;
                }
            }
        }
        .journalism_two{  //下
            display: flex;
            flex-direction: column;
            height: 250/360*100vw;
            border-bottom: solid 1px #333333;
            padding: 3/360*100vw;
            .video{
                font-size: 15/360*100vw;
            }
            .video_one{
                flex: 9;
                display: flex;
                position: relative;
                justify-content: center;
                align-items: center;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                .iconshipin{
                    position: absolute;
                    font-size: 50/360*100vw;
                    color: white;
                    background-color: #ece9e9;
                    opacity: .7;
                }
            }
            .video_two{
                flex: .5;
                font-size: 10/360*100vw;
                color: #888686;
            }
        }
    }
</style>